<template>
  <div class="background">
    <el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer">
      <h3 class="loginTitle">欢迎来到ModernWMS!👋🏻</h3>
      <el-form-item prop="account">
        <el-input type="text" prefix-icon="el-icon-user" v-model="loginForm.account" placeholder="请输入账号">
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" prefix-icon="el-icon-link" v-model="loginForm.password" placeholder="请输入密码">
        </el-input>
      </el-form-item>
      <el-form-item>
        <SilderVerify ref="verify"></SilderVerify>
      </el-form-item>
      <!-- <el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox> -->
      <el-button type="primary" style="width: 100%" @click="submitLogin">登录</el-button>
    </el-form>
  </div>
</template>

<script>
  import {
    Loading
  } from 'element-ui'
  import SilderVerify from "@/components/SilderVerify";
  export default {
    name: "Login",
    components: { SilderVerify },
    data() {
      return {
        loadingInstance: null,
        captchaUrl: "",
        loginForm: {
          account: "",
          password: "",
        },
        checked: false,
        rules: {
          account: [
            { required: true, message: "请输入用户名", trigger: "blur" },
            // {
            //   min: 5,
            //   max: 14,
            //   message: "长度在 5 到 14 个字符",
            //   trigger: "blur",
            // },
          ],
          password: [
            { required: true, message: "请输入密码", trigger: "blur" },
            ,
            //{ min: 6, message: "密码长度要大于6", trigger: "blur" },
          ],
        },
      };
    },
    methods: {
      submitLogin() {
        if (this.$refs.verify) {
          if (!this.$refs.verify.confirmSuccess) {
            this.$message.error("请拖动滑块验证");
            return;
          }
        }
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            if (this.checked) {
              // 如果用户选择记住密码和用户名，则保存到本地存储
              localStorage.setItem('checkedName', this.loginForm.name);
              localStorage.setItem('checkedPwd', this.loginForm.pwd);
            } else {
              // 否则清除本地存储中的用户名和密码
              localStorage.removeItem('checkedName');
              localStorage.removeItem('checkedPwd');
            };
            this.$axios.get('http://localhost:5259/api/Authoize/Login', {
              params: {
                account: this.loginForm.account,
                pwd: this.loginForm.password
              }
            }).then(res => {
              console.log(res);
              if (res == "用户名或密码错误") {
                this.$message({
                  message: '登录失败',
                  type: 'error'
                })
              } else {
                this.loadingInstance = Loading.service({
                  text: "登录中请稍后...",
                  spinner: 'el-icon-loading',
                  background: 'rgba(0,0,0,0.7)'
                });
                localStorage.setItem("token", res.data);
                const token = parseJwt(res.data);
                localStorage.setItem("UUid", token.UUid);
                localStorage.setItem("UUserName", token.UUserName);
                localStorage.setItem("UUpwd", token.UUpwd);
                localStorage.setItem("UUimg", token.UUimg);
                var _this = this;
                setTimeout(function () {
                  _this.$router.push("/home");
                }, 200);
                setTimeout(function () {
                  _this.loadingInstance.close();
                  _this.$message.success("登录成功");
                }, 1000);
              }
            })
          } else {
            this.$message.error("登录出错请重新输入");
            return false;
          }
        });

      },
    },
  };
  //jwt解密
  function parseJwt(token) {
    const base64Url = token.split('.')[1];
    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    const jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function (c) {
      return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
    return JSON.parse(jsonPayload);
  }
</script>

<style scoped>
  .loginContainer {
    border-radius: 16px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 40px;
    background: aliceblue;
    border: 1px solid rgb(255, 255, 255);
    box-shadow: 0 0 25px #dad9db;
  }

  .loginTitle {
    margin: 0px auto 30px auto;
    text-align: center;
    font-size: 40px;
  }

  .loginRemember {
    text-align: left;
    margin: 0px 0px 15px 0px;
  }

  .background {
    position: absolute;
    background-image: url("../assets/image.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100vh;
    /* 设置高度以填充整个视口 */
    width: 100%;
  }
</style>